import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:interactive_chart/interactive_chart.dart';
import 'dart:math' as math;

class CandlePageWidget extends StatelessWidget {
  const CandlePageWidget({super.key});

  @override
  Widget build(BuildContext context) {
    List<CandleData> data = [];
    for (int i = 0; i < 200; i++) {
      var randomFloat = (math.Random().nextDouble() + 0.1) * 10.0;

      if (i > 1 && i % 5 == 0) {
        data.add(CandleData(
            timestamp: 1714110935000 + (i * 24 * 3600000),
            open: 4 * randomFloat,
            close: 2 * randomFloat,
            volume: 2 * randomFloat,
            high: 5 * randomFloat,
            low: 1 * randomFloat,
            trends: [2 * randomFloat]));
      } else {
        data.add(CandleData(
            timestamp: 1714110935000 + (i * 24 * 3600000),
            open: 2 * randomFloat,
            close: 4 * randomFloat,
            volume: 4 * randomFloat,
            high: 5 * randomFloat,
            low: 1 * randomFloat,
            trends: [4 * randomFloat]));
      }
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text("走势"),
      ),
      body: Container(
        padding: const EdgeInsets.all(12.0),
        child: InteractiveChart(
          /** Only [candles] is required */
          candles: data,
          /** Uncomment the following for examples on optional parameters */
          initialVisibleCandleCount: 20,
          /** Example styling */
          style: ChartStyle(
            // priceGainColor: Colors.red,
            // priceLossColor: Colors.green,
            volumeColor: Colors.blue,
            trendLineStyles: [
              Paint()
                ..strokeWidth = 1.0
                ..strokeCap = StrokeCap.round
                ..color = Colors.black,
              //   Paint()
              //     ..strokeWidth = 4.0
              //     ..strokeCap = StrokeCap.round
              //     ..color = Colors.orange,
            ],
            priceGridLineColor: Colors.orange,
            priceLabelStyle: TextStyle(color: Colors.purpleAccent),
            timeLabelStyle: TextStyle(color: Colors.blue),
            selectionHighlightColor: Colors.lightGreen,
            overlayBackgroundColor: Colors.pinkAccent,
            overlayTextStyle: TextStyle(color: Colors.yellowAccent),
            timeLabelHeight: 32,
            volumeHeightFactor: 0.2, // volume area is 20% of total height
          ),
          /** Customize axis labels */
          // timeLabel: (timestamp, visibleDataCount) => "📅",
          // priceLabel: (price) => "${price.round()} 💎",
          /** Customize overlay (tap and hold to see it)
           ** Or return an empty object to disable overlay info. */
          // overlayInfo: (candle) => {
          //   "💎": "🤚    ",
          //   "Hi": "${candle.high?.toStringAsFixed(2)}",
          //   "Lo": "${candle.low?.toStringAsFixed(2)}",
          // },
          /** Callbacks */
          // onTap: (candle) => print("user tapped on $candle"),
          onCandleResize: (width) => print("each candle is $width wide"),
        ),
      ),
    );
  }
}
